<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>China Map with Three.js</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-geo/1.12.1/d3-geo.min.js"></script>
    <script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r17/Stats.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
    <script>
        let scene, camera, renderer, chinaMap;
        const stats = new Stats();

        init();
        animate();

        function init() {
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x000000);

            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.z = 5;

            renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
            scene.add(ambientLight);

            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
            directionalLight.position.set(1, 1, 1);
            scene.add(directionalLight);

            loadChinaMap();

            document.body.appendChild(stats.dom);

            window.addEventListener('resize', onWindowResize, false);
        }

        function loadChinaMap() {
            d3.json('https://gist.githubusercontent.com/anonymous/64883dce95e1f2d2e6f176c0e7c0d526/raw/8d0b0f7e2e8f2a4b6d0ae31d4c6c7a2f0c49c4c2/china.json')
                .then(data => {
                    const projection = d3.geoMercator().center([105, 38]).scale(100);
                    const path = d3.geoPath(projection);

                    const shape = new THREE.Shape();
                    data.features.forEach((feature, i) => {
                        const coordinates = feature.geometry.coordinates[0];
                        coordinates.forEach((coord, j) => {
                            const point = projection(coord);
                            if (j === 0) {
                                shape.moveTo(point[0], -point[1]);
                            } else {
                                shape.lineTo(point[0], -point[1]);
                            }
                        });
                    });

                    const geometry = new THREE.ShapeGeometry(shape);
                    const material = new THREE.MeshPhongMaterial({
                        color: 0x156289,
                        side: THREE.DoubleSide,
                        emissive: 0x072534,
                        flatShading: true
                    });
                    chinaMap = new THREE.Mesh(geometry, material);
                    scene.add(chinaMap);
                });
        }

        function animate() {
            requestAnimationFrame(animate);
            stats.update();
            renderer.render(scene, camera);
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
    </script>
</body>
</html>